<script setup>
import { ref } from "vue";
import { convertTimestampToDate } from "@/utils/date.js";
import NavBar from "@/components/NavBar/index.vue";

const genderPicker = ref(null);
const genders = [["男", "女"]];
const datePicker = ref(null);
const modelPicker = ref(null);
const models = [
  [
    "A1",
    "A2",
    "A3",
    "B1",
    "B2",
    "C1",
    "C2",
    "C3",
    "C4",
    "D",
    "E",
    "F",
    "M",
    "N",
    "P",
  ],
];

const licenseImagePath = ref("");

const licenseForm = ref({
  name: undefined,
  gender: undefined,
  expires_at: undefined,
  model: undefined,
});

function confirm(e) {
  console.log(e);
}

function handleUploadLicense() {
  wx.chooseMedia({
    count: 1,
    mediaType: ["image"],
    sourceType: ["album", "camera"],
    camera: "back",
    success(res) {
     
      licenseImagePath.value = res.tempFiles[0].tempFilePath;
    },
  });
}

function navigateToMe() {
  uni.switchTab({
    url: "/pages/Me/index",
  });
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToMe" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>请拍照上传证件或完成完善信息</text>
    </div>
    <div class="content">
      <div class="license">
        <image src="@/static/icon/license.png" class="license-icon" />
        <div class="license-op">
          <div class="license-desc">请上传驾驶证照片</div>
          <button class="license-button" @click="handleUploadLicense">
            {{ licenseImagePath ? "重新上传" : "上传" }}
          </button>
        </div>
      </div>
      <div class="form">
        <div class="form-desc">或您可以手动输入补充信息</div>
        <div class="name-and-gender">
          <uv-input
            v-model="licenseForm.name"
            placeholder="姓名"
            class="input"
          ></uv-input>
          <uv-picker
            ref="genderPicker"
            :columns="genders"
            @confirm="(e) => (licenseForm.gender = e.value[0])"
          ></uv-picker>
          <div @click="genderPicker.open()" class="gender-picker-button">
            {{ licenseForm.gender || "性别" }}
            <image
              src="@/static/icon/chevron-down.png"
              class="picker-button-icon"
            />
          </div>
        </div>
        <div class="expires">
          <uv-datetime-picker
            ref="datePicker"
            v-model="licenseForm.expires_at"
            mode="date"
            @confirm="(e) => (licenseForm.expires_at = e.value)"
          >
          </uv-datetime-picker>
          <div @click="datePicker.open()" class="date-button">
            {{
              convertTimestampToDate(licenseForm.expires_at) || "驾驶证有效期至"
            }}
            <image src="@/static/icon/calendar.png" class="date-button-icon" />
          </div>
        </div>
        <div class="model">
          <uv-picker
            ref="modelPicker"
            :columns="models"
            @confirm="(e) => (licenseForm.model = e.value[0])"
          ></uv-picker>
          <div @click="modelPicker.open()" class="model-picker-button">
            {{ licenseForm.model || "准驾车型为" }}
            <image
              src="@/static/icon/chevron-down.png"
              class="picker-button-icon"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="op">
      <div class="op-desc">点击保存前，请务必核实您的信息是否正确</div>
      <button class="op-btn">保存</button>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.license {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 40px;
  box-sizing: border-box;
  background: #f7fff3;
  border-radius: 10px;
}

.license-icon {
  width: 102px;
  height: 86px;
  object-fit: contain;
}

.license-op {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 40px 40px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.name-and-gender {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.input {
  width: 50%;
}

:deep(.uv-input) {
  height: 48px;
  padding-left: 10px;
  background-color: #f7fff3;
  color: #00000080 !important;
  border: none !important;
  font-size: 16px !important;
  box-shadow: none;
  outline: none;
  border-radius: 8px !important;
  box-sizing: border-box;
}

:deep(.uv-input__content__field-wrapper__field) {
  font-size: 16px !important;
}

.gender-picker-button {
  width: 50%;
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #f7fff3;
  color: #00000080;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 8px;
}

.date-button {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #f7fff3;
  color: #00000080;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 8px;
}

.model-picker-button {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #f7fff3;
  color: #00000080;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 8px;
}

.picker-button-icon {
  padding-left: 8px;
  width: 18px;
  height: 18px;
}

.date-button-icon {
  padding-left: 8px;
  width: 18px;
  height: 18px;
}

.license-desc {
  font-size: 16px;
  color: #00000080;
}

.license-button {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  border-radius: 10px;
  box-sizing: border-box;
}

.op {
  width: 100%;
  position: fixed;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.op-desc {
  width: 100%;
  display: flex;
  justify-content: center;
}

.op-btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
